<template>
	<view class="Ctarbar">
		<u-tabbar
    :value="activePath"
    :fixed="true"
    :placeholder="true"
    :safeAreaInsetBottom="true"
    activeColor=""
	  zIndex="99"
	@placeholderHeight="placeholderHeight"
  >
    <u-tabbar-item
      v-for="item in tabbarList"
      :key="item.pagePath"
      :text="item.text"
      :name="item.pagePath"
      :icon="item.selectIconPath"
	  @click="selectedTabbar"
    />
  </u-tabbar>
	</view>
  
</template>
<script>
import { mapGetters } from "vuex";
export default {
	options: {
		styleIsolation: 'shared'
	}, // 父组件设置 options.styleIsolation 可穿透子组件，以及页面
  data() {
    return {
      activePath: "", // 选中的标签
    };
  },
  computed: {
    ...mapGetters(["tabbarList"]),
  },
  watch: {
    activePath: {
      handler(n) {
        this.init()
      },
      deep: true,
    }
  },
  mounted() {
    const routes = getCurrentPages()
    this.activePath = routes[routes.length-1].route // 赋值当前页面路径（触发监听
  },
  activated() { // uniapp默认在全局范围内开启并使用了Keep-alive
    const routes = getCurrentPages()
    this.activePath = routes[routes.length-1].route // 赋值当前页面路径（触发监听
  },
  methods: {
    // 初始化
    init() {
      const data = this.tabbarList.map(item => {
        if (item.pagePath === this.activePath) { // 选中
          item.selectIconPath = item.selectedIconPath
        } else { // 未选中
          item.selectIconPath = item.iconPath
        }
        return item
      })
      this.$store.commit('tabbar/SET_TABBARLIST', data)
    },
    // 点击选择底部标题回调
    selectedTabbar(activePath) {
      this.activePath = activePath;
	    this.init()
      uni.switchTab({ url: `/${this.activePath}`})
    },
	// 获取底部导航栏高度
	placeholderHeight(hegiht) {
		this.$emit('placeholderHeight', hegiht)
	}
  },
};
</script>
<style lang="scss" scoped>
</style>